<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <div class="contentsize">{{ title }}</div>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-form ref="form" :model="lsybform" label-width="80px" :inline="true" size="mini">
                    <el-form-item label="选择日期:">
                        <el-select v-model="lsybform.id" placeholder="请选择日期" @change="onSearch">
                            <el-option v-for="(item, index) in datalist" :key="index" :label="item.label" :value="item.id"> </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="resubmit">重置</el-button>
                        <el-button
                            type="primary"
                            @click="downloadlist"
                            icon="el-icon-download"
                            class="searchcolor"
                            style="margin-bottom: 10px"
                            >导出</el-button
                        >
                        <el-button type="primary" @click="submitlist">保存</el-button>
                    </el-form-item>
                </el-form>

                <table width="100%" border="1" cellspacing="1" cellpadding="4" id="xqtableExcel7" align="center" class="table-2">
                    <!-- style="background:linear-gradient(to bottom, #008A94,#0ae2f2)!important;font-weight:700;color:#ffffff" -->
                    <tr>
                        <td class="titfont1" colspan="2">掌管</td>
                        <td class="titfont1" colspan="2">出租</td>
                        <td class="titfont1" colspan="2">自用</td>
                        <td class="titfont1" colspan="2">出借</td>
                        <td class="titfont1" colspan="2">未经营</td>
                        <td class="titfont1" colspan="2">有纠纷</td>
                        <td class="titfont1" colspan="2">空置</td>
                    </tr>
                    <tr>
                        <td class="titfont">户数</td>
                        <td class="titfont">建筑面积</td>
                        <td class="titfont">户数</td>
                        <td class="titfont">建筑面积</td>
                        <td class="titfont">户数</td>
                        <td class="titfont">建筑面积</td>
                        <td class="titfont">户数</td>
                        <td class="titfont">建筑面积</td>
                        <td class="titfont">户数</td>
                        <td class="titfont">建筑面积</td>
                        <td class="titfont">户数</td>
                        <td class="titfont">建筑面积</td>
                        <td class="titfont">户数</td>
                        <td class="titfont">建筑面积</td>
                    </tr>
                    <tr>
                        <td class="titfont">{{ ybdedtail.zghs }}</td>
                        <td class="titfont">{{ ybdedtail.zgmj }}</td>
                        <td class="titfont">{{ ybdedtail.czhs }}</td>
                        <td class="titfont">{{ ybdedtail.czmj }}</td>
                        <td class="titfont">{{ ybdedtail.zyhs }}</td>
                        <td class="titfont">{{ ybdedtail.zymj }}</td>
                        <td class="titfont">{{ ybdedtail.cjhs }}</td>
                        <td class="titfont">{{ ybdedtail.cjmj }}</td>
                        <td class="titfont">{{ ybdedtail.wjyhs }}</td>
                        <td class="titfont">{{ ybdedtail.wjymj }}</td>
                        <td class="titfont">{{ ybdedtail.yjfhs }}</td>
                        <td class="titfont">{{ ybdedtail.yjfmj }}</td>
                        <td class="titfont">{{ ybdedtail.kzhs }}</td>
                        <td class="titfont">{{ ybdedtail.kzmj }}</td>
                    </tr>
                </table>
                <table
                    width="100%"
                    border="1"
                    cellspacing="1"
                    cellpadding="4"
                    id="xqtableExcel7"
                    align="center"
                    class="table-2"
                    style="margin-top: 20px"
                >
                    <!-- style="background:linear-gradient(to bottom, #008A94,#0ae2f2)!important;font-weight:700;color:#ffffff" -->
                    <tr>
                        <td class="titfont" colspan="1">月租金</td>
                        <td class="titfont" colspan="1">年租金</td>
                        <td class="titfont1" style="width: 10%;">当月应收租金</td>
                        <td class="titfont1" style="width: 10%;">当月已收租金</td>
                        <td class="titfont1" style="width: 10%;">当月收缴率</td>
                        <td class="titfont1" style="width: 10%;">累计至当月应收</td>
                        <td class="titfont1" style="width: 10%;">累计至当月已收</td>
                        <td class="titfont1" style="width: 11%;">累计至当月收缴率</td>
                        
                        <!-- <td class="titfont1" style="width: 10%;">当年应收</td>
                        <td class="titfont1" style="width: 10%;">当年已收</td>
                        <td class="titfont1">累计收缴率</td> -->
                    </tr>
                    <tr>
                        <td class="titfont" colspan="1">{{ ybdedtail.yzj }}</td>
                        <td class="titfont" colspan="1">{{ ybdedtail.nzj }}</td>
                        <td class="titfont1" style="width: 10%;">{{ ybdedtail.dyys }}</td>
                        <td class="titfont1" style="width: 10%;">{{ ybdedtail.dyysq }}</td>
                        <td class="titfont1" style="width: 10%;">{{ ybdedtail.dysjl }}</td>
                        <td class="titfont1" style="width: 10%;">{{ ybdedtail.ljdyys }}</td>
                        <td class="titfont1" style="width: 10%;">{{ ybdedtail.ljdyysq }}</td>
                        <td class="titfont1" style="width: 11%;">{{ ybdedtail.ljdysjl }}</td>
                        <!-- <td class="titfont1" style="width: 10%;">{{ ybdedtail.dnys }}</td>
                        <td class="titfont1" style="width: 10%;">{{ ybdedtail.dnysq }}</td>
                        <td class="titfont1">{{ ybdedtail.ljsjl }}</td> -->
                    </tr>
                </table>
            </div>
        </div>
    </div>
</template>

<script>
import { jyybdetails, exportjyyb, jyybadd, jyyblslist, ybjldetails } from '@/api/index';
import valueList from '@/components/common/valueList.vue';
export default {
    name: 'dalist',
    data() {
        return {
            title: '',
            lsybform: { id: '' },
            ybdedtail: {},
            jyybform: {},
            datalist: [],
            form: {
                current: 1,
                pageSize: 10000,
                year: '',
                month: '',
                type: this.$store.getters.type
            }
        };
    },
    components: {},
    computed: {},
    methods: {
        // 经营月报详情
        jyybdetails(data) {
            jyybdetails(data).then((res) => {
                console.log(res);
                this.ybdedtail = res.data;
            });
        },
        // 获取当前时间
        getDataNow() {
            const currentYear = new Date().getFullYear();
            var currentMonth = new Date().getMonth() + 1;
            this.jyybform = {
                type: this.$store.getters.type,
                year: currentYear,
                month: currentMonth
            };
            this.jyybdetails(this.jyybform);
            this.title = this.jyybform.year + '年' + this.jyybform.month + '月经营分析月报';
        },
        // 导出列表
        downloadlist() {
            exportjyyb(this.jyybform).then((res) => {
                console.log(res);
                const link = document.createElement('a');
                let blob = new Blob([res], {
                    type: 'application/vnd.ms-excel'
                });
                link.style.display = 'none';
                //设置连接
                link.href = URL.createObjectURL(blob);
                link.download = '经营月报导出文件';
                document.body.appendChild(link);
                //模拟点击事件
                link.click();
                console.log(res);
            });
            this.ybdedtail.year=this.ybdedtail.year?this.ybdedtail.year:this.jyybform.year
            this.ybdedtail.month=this.ybdedtail.month?this.ybdedtail.month:this.jyybform.month
            jyybadd(this.ybdedtail).then((res) => {
                console.log(res);
            });
        },
        submitlist() {
            this.ybdedtail.year=this.ybdedtail.year?this.ybdedtail.year:this.jyybform.year
            this.ybdedtail.month=this.ybdedtail.month?this.ybdedtail.month:this.jyybform.month
            jyybadd(this.ybdedtail).then((res) => {
                if (res.code == 200) {
                    this.$message.success('保存成功');
                    this.jyyblslist(this.form);
                } else {
                    this.$message.error('保存失败');
                }
                console.log(res);
            });
        },
        onSearch() {
            this.ybdedtail = [];
            let titledata = this.datalist.find((res) => {
                return res.id == this.lsybform.id;
            });
            this.title=titledata.label
            this.jyybform.year=titledata.year
            this.jyybform.month=titledata.month
            let data = {
                id: this.lsybform.id
            };
            ybjldetails(data).then((res) => {
                this.ybdedtail = res.data;
            });
        },
        // 经营月报历史记录列表
        jyyblslist(data) {
            this.datalist=[]
            jyyblslist(data).then((res) => {
                if (res.code == 200) {
                    res.data.records.map((item) => {
                        let ybdata = {
                            id: item.id,
                            year:item.year,
                            month:item.month,
                            label: item.year + '年' + item.month + '月经营分析月报'
                        };
                        this.datalist.push(ybdata);
                    });
                    console.log(this.datalist);
                } else {
                    console.log('暂无数据');
                }
            });
        },
        resubmit() {
            this.lsybform={ id: '' }
            this.ybdedtail = [];
            this.getDataNow();
        }
    },
    mounted() {
        console.log('未获取到值');
        this.jyyblslist(this.form);
        this.getDataNow();
    }
};
</script>
<style>
</style>
<style scoped>
.crumbs {
    background-color: #fff;
    padding: 20px 20px;
}

.indexTitle {
    margin-bottom: 20px;
}

.contentsize {
    font-size: 18px;
    font-weight: 700;
}

.handle-box {
    overflow: hidden;
}
.container {
    height: calc(100vh - 260px);
    /* overflow: hidden; */
}
table {
    width: 100%;
    margin: auto;
    text-align: center;
}
.table-2 {
    border: 1px solid #c0c0c0;
    /* border-bottom: none; */
    border-collapse: collapse;
}
.table-2 tr,
.table-2 td {
    font-size: 14px;
    border-collapse: collapse;
    border: 1px solid #c0c0c0;
    border-bottom: none;
    padding: 10px;
    box-sizing: border-box;
}
.titfont {
    width: 7%;
}
.titfont1 {
    width: 14%;
}
</style>
